<template>
  <div class="main">
    <el-row class="main-header">
      <div class="main-choose">
       <template v-for="(v,index) in choose">
         <el-button :key="index"  @click="select(index)" round :class="active==index?'focus':''">{{v.name}}</el-button>
       </template>
      </div>
    </el-row>
    <div class="content">
      <transition name="el-fade-in">
        <router-view/>
    </transition>

    </div>

  </div>
</template>
<script>
import store from "../../store"

export default {
  name: "center",

  props: {
    // title: String,
    // option: Array,
    // formData: Object,
    // isEdit: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  data() {
    return {
      newId:null,
      componentName:'Cont',
      active:0,
      choose:[{name:'首页',selected:true},{name:'我的收藏',selected:false},{name:'我的下载',selected:false},{name:'浏览历史',selected:false},]
    }
  },
  methods: {
        select(index,indexId){
          this.active=index
        if(index==0){
          //  this.componentName=Cont
          this.$router.push('/page/center/cont')
         }else if(index==1){
          //  this.componentName=Recommend
          this.$router.push('/page/center/recommend')
         }else if(index==2){
          //  this.componentName=HotNew
          this.$router.push('/page/center/hotNew')
         }else {
            this.$router.push('/page/center/history')
         }
        }
  },
};
</script>
<style lang="scss" scoped>
.main-header{
background:rgba(238,239,238,1);
}
.main-choose{
  max-width: 1440px;
  margin: 14px auto;
}
.content{
    max-width: 1440px;
  margin: 0 auto;
  padding-top: 30px;
}
</style>
<style lang="scss">
.main-choose{
  .focus{
    background:rgba(28,162,167,1) !important;
    color: #fff !important;
  }
  .el-button{
    padding: 0;
   width:180px;
height:44px;
background:rgba(238,239,238,1);
border-radius:22px;
line-height: 44px;
font-size:22px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(79,79,79,1);
border-color:rgba(238,239,238,1) ;
  }
}
</style>